<template>
  <div
    class="stepper"
    :class="{ disabled: disabled, round: round }"
    :style="{ height: size }"
  >
    <div
      class="reduce iconfont"
      :class="{ disabled: min === value }"
      :style="{ width: size, lineHeight: size }"
      @click="reduce"
    >
      &#xe715;
    </div>
    <input
      :value="value"
      @input="handleInput"
      :disabled="disabled"
      type="number"
      :style="{ width: `calc(${size} + 5px)` }"
    />
    <div
      class="plus iconfont"
      :style="{ width: size, lineHeight: size }"
      @click="plus"
    >
      &#xe716;
    </div>
  </div>
</template>

<script>
export default {
  name: "Stepper",
  props: {
    value: Number,
    min: {
      type: Number,
      default: 1,
    },
    step: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "28px",
    },
    round: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    reduce() {
      let { disabled, value, step, min } = this;
      let val = value - step;

      if (val < min || disabled) return;
      this.$emit("input", val);
    },
    plus() {
      let { disabled, value, step } = this;
      if (disabled) return;
      this.$emit("input", value + step);
    },
    handleInput(e) {
      this.$emit("input", parseInt(e.target.value));
    },
  },
};
</script>

<style lang="scss" scoped>
$radius: 3px;
$roundColor: #fc3932;

.stepper {
  display: inline-block;
  background: #fff;
  border-radius: $radius;

  &.disabled {
    .iconfont,
    input {
      color: #999 !important;
    }
  }

  &.round {
    .iconfont {
      border-radius: 50% !important;

      &.reduce {
        color: $roundColor;
        border: 1px solid $roundColor;
        background: #fff !important;
        box-sizing: border-box;
      }

      &.plus {
        color: #fff !important;
        background: $roundColor !important;
      }
    }

    input {
      background: transparent !important;
    }
  }

  .iconfont {
    height: 100%;
    text-align: center;
    background: #f2f3f5;
    color: #555;
    font-size: 13px;
    float: left;

    &.disabled {
      color: #999;
    }

    &.reduce {
      border-radius: $radius 0 0 $radius;
    }

    &.plus {
      border-radius: 0 $radius $radius 0;
    }
  }

  input {
    height: 100%;
    border: 0;
    background: #f2f3f5;
    text-align: center;
    outline: none;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    float: left;
    color: #333;
    font-size: 13px;
  }
}
</style>
